<!--智慧消防V1.0-list页面-->
<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="12">
<!--                <video width="100%" height="450px" src="https://flvopen.ys7.com:9188/openlive/4434daaad79c4850bc1ed06475bf24d7.flv"></video>-->
<!--                -->
                <video id="videoElement" controls width="100%" height="450px"></video>
            </el-col>
            <el-col :span="12">
                <video id="videoElement1" controls width="100%" height="450px"></video>
            </el-col>
            <el-col :span="12">
                <video id="videoElement2" controls width="100%" height="450px"></video>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getYsToken} from "@/api/common";
import flvjs from 'flv.js'
export default {
    name: "list",
    data(){
        return{
            accessToken:'',
            flvPlayer:null,
            flvPlayer1:null,
            flvPlayer2:null,
            src1:"https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/F48963787/1.live&autoplay=1&audio=1&accessToken=",
            src2:"https://open.ys7.com/ezopen/h5/iframe_se?url=ezopen://open.ys7.com/F48963785/1.live&autoplay=1&audio=1&accessToken="
        }
    },
    created() {
        this.getYsToken()
    },
    mounted() {
        /* 获取播放器元素 */
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var videoElement1 = document.getElementById('videoElement1');
            var videoElement2 = document.getElementById('videoElement2');
            this.flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                hasAudio: false,
                url: 'https://flvopen.ys7.com:9188/openlive/4434daaad79c4850bc1ed06475bf24d7.flv'
            });
            this.flvPlayer.attachMediaElement(videoElement);
            this.flvPlayer.load();
            this.flvPlayer.play();
            this.flvPlayer1 = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                hasAudio: false,
                url: 'https://flvopen.ys7.com:9188/openlive/ea3ebe6118fb4ae0aaf8fbca98cbbcdb.flv'
            });
            this.flvPlayer1.attachMediaElement(videoElement1);
            this.flvPlayer1.load();
            this.flvPlayer1.play();
            this.flvPlayer2 = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                hasAudio: false,
                url: 'https://flvopen.ys7.com:9188/openlive/2f1d06c6fcd44f48ad34e058cab13ca1.flv'
            });
            this.flvPlayer2.attachMediaElement(videoElement2);
            this.flvPlayer2.load();
            this.flvPlayer2.play();
        }


        // var player = document.getElementById('videoElement').contentWindow;
        // if (flvjs.isSupported()) {
        //     var flvPlayer = flvjs.createPlayer({
        //         src: "rtmp://rtmp01open.ys7.com/openlive&f01018a141094b7fa138b9d0b856507b",
        //         type:'rtmp/flv'
        //     });
        //     flvPlayer.attachMediaElement(videoElement);
        //     flvPlayer.load(); //加载
        // }
        // var player1 = document.getElementById('ysopen1').contentWindow;
        // /* iframe 支持方法 */
        // /* iframe 支持方法 */
        // player.postMessage("play", "https://open.ys7.com/ezopen/h5/iframe_se") /* 播放 */
        // player.postMessage("stop", "https://open.ys7.com/ezopen/h5/iframe_se") /* 结束 */
        // player.postMessage("capturePicture", "https://open.ys7.com/ezopen/h5/iframe_se") /* 截图 */
        // player.postMessage("openSound", "https://open.ys7.com/ezopen/h5/iframe_se") /* 开启声音 */
        // player.postMessage("closeSound", "https://open.ys7.com/ezopen/h5/iframe_se") /* 关闭声音 */
        // player.postMessage("startSave", "https://open.ys7.com/ezopen/h5/iframe_se") /* 开始录制 */
        // player.postMessage("stopSave", "https://open.ys7.com/ezopen/h5/iframe_se") /* 结束录制 */
        // player1.postMessage("play", "https://open.ys7.com/ezopen/h5/iframe_se") /* 播放 */
        // player1.postMessage("stop", "https://open.ys7.com/ezopen/h5/iframe_se") /* 结束 */
        // player1.postMessage("capturePicture", "https://open.ys7.com/ezopen/h5/iframe_se") /* 截图 */
        // player1.postMessage("openSound", "https://open.ys7.com/ezopen/h5/iframe_se") /* 开启声音 */
        // player1.postMessage("closeSound", "https://open.ys7.com/ezopen/h5/iframe_se") /* 关闭声音 */
        // player1.postMessage("startSave", "https://open.ys7.com/ezopen/h5/iframe_se") /* 开始录制 */
        // player1.postMessage("stopSave", "https://open.ys7.com/ezopen/h5/iframe_se") /* 结束录制 */
    },
    methods:{
        getYsToken() {
            getYsToken({}).then(res => {
                console.log(res.data)
                this.accessToken=res.data
                this.src1=this.src1+this.accessToken
                this.src2=this.src2+this.accessToken
            }).catch(res => {


            })
        },
    }
}
</script>

<style scoped>

</style>